<template>
  <div class="guide-page text-center flex-center flex">
    <template v-if="patientsClientFlag">
      <img
        src="https://heals-prod.oss-cn-hangzhou.aliyuncs.com/oss/staticFile/weapp/guide-img.png"
        class="guide-bg-img"
      >

      <div class="guide-btn">
        点击进入
        <wx-open-launch-weapp
          id="course-btn"
          :path="`pages/login/index?hospitalId=${userInfo.hospitalId ||
            ''}&departmentId=${userInfo.departmentId || ''}&healsToken=${userInfo.token|| ''}`"
          style="width: 100%;height: 100%;position: absolute;top: 0;left: 0;z-index: 999;"
          username="gh_23dde025e4a2"
        >
          <div v-is="'script'" type="text/wxtag-template">
            <div style="width:100%; height:100%; position: absolute;top:0;bottom:0;left:0;right:0;z-index:5;opacity: 0;" />
          </div>
        </wx-open-launch-weapp>
      </div>
    </template>
 
    <div class="course-box" v-else>
      <div>
        <img
          class="guide-box-img"
          src="https://heals-prod.oss-cn-hangzhou.aliyuncs.com/oss/staticFile/h5/course-setting.png"
        >
      </div>
      <div>正在建设中，敬请期待～</div>
    </div>
  </div>
</template>

<script>
import { computed, onMounted, ref } from 'vue';
import { useStore } from 'vuex';
import * as Sentry from '@sentry/vue';
import { useService } from '@/utils/services';
export default {
  setup() {
    const store = useStore();
    const actions = useService();

    const patientsClientFlag = ref(false);

    const userInfo = computed(() => store.state.global.userInfo);

    onMounted(() => {
      actions.hos.getHomeSetting().then((res) => {
        setTimeout(() => {
          document.getElementById('course-btn')?.addEventListener('error', (e) => {
            // 创建异常描述
            let err = new Error('小程序跳转错误');
            err.name = '小程序跳转错误';
            try {
              err.message = JSON.stringify(e);
            } catch {
              err.message = e;
            }
            // 手动捕获异常
            Sentry.captureException(err);
          });
        });
        patientsClientFlag.value = res.patientsClientFlag;
      });
    });

    return { patientsClientFlag, userInfo };
  }
};
</script>

<style lang="scss" scoped>
.guide-page {
  height: 100%;
  background: #fff;
}

.guide-bg-img {
  width: 100vw;
  height: 100%;
}

.guide-btn {
  position: fixed;
  bottom: 150px;
  left: 50%;
  transform: translate(-50%);
  margin: 40px auto;
  border-radius: 100px;
  width: 331px;
  height: 85px;
  background: #ff5f87;
  text-align: center;
  font-size: 39px;
  font-weight: bold;
  color: #ffffff;
  line-height: 85px;
}

.guide-title {
  margin-top: 22px;
  margin-bottom: 55px;
  text-align: center;
  font-size: 60px;
  font-family: SourceHanSansCN-Heavy, SourceHanSansCN;
  font-weight: 800;
  color: #ffffff;
  line-height: 88px;
  text-shadow: 0px 0px 16px rgba(26, 132, 127, 0.3);
}

.guide-title-tip {
  color: #ffea12;
}

.guide-img {
  width: 100%;
  margin-bottom: 20px;
}

.guide-video {
  width: 100%;
}

.course-box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 444px;
  text-align: center;
  font-size: 30px;
  font-weight: 500;
  color: #a2a6b8;
  line-height: 42px;

  .guide-box-img {
    width: 100%;
    display: block;
    margin: auto;
    height: auto;
  }
}
</style>